<template>
  <div class="photos-container">
<!--    <el-image-->
<!--        lazy-->
<!--        style="width: 100px; height: 100px"-->
<!--        :src="url"-->
<!--        :preview-src-list="srcList">-->
<!--    </el-image>-->
    <el-card class="box-card" shadow="always">
        <div class="card-top">
          <i class="el-icon-magic-stick"></i>
          <span>Serendipity</span>
        </div>
      <div class="card-middle">
        努力的意义，就是，以后的日子里，放眼望去，全部都是自己喜欢的人和事。
      </div>
      <div class="card-bottom">
        每一个不曾起舞的日子，都是对生命的辜负。
      </div>
    </el-card>

  <div class="comment">
    <div class="img-box" v-for="(item, i) in imgList" :key="item._id">
      <div class="img"  @click="jumpChildRoute(item.child_route)">
        <span  class="img-tishi">{{item.img_title}}</span>
        <img :src="item.img_url" alt="">
      </div>

      <div class="img-content">
        {{item.img_introduce}}
      </div>
      <div class="dateAndBottom">
        <div class="img-date">
          <div>
            <i class="el-icon-collection"></i>
            {{item.date}}年
          </div>
          <div>
            <i class="el-icon-time"></i>
            <span>
          {{ item.time }}
        </span>
          </div>
        </div>
        <div class="line"></div>
        <span class="img-bottom" @click.stop="jumpTV(item.tv_link)">
        {{ item.tv_title }}
      </span>
      </div>
    </div>
  </div>

    <e-bottom></e-bottom>

  </div>
</template>

<script>
import bottom from "@/components/bottom";
export default {
  data() {
    return {
      imgList: []
    };
  },
  created() {
    this.getImgList()
  },
  methods: {
    async getImgList () {
      const { data: res } = await this.$http.get('getphotos')
      this.imgList = res.photoslist
      console.log(this.imgList);
    },
    jumpChildRoute(childRoute) {
      this.$router.push(`/photos/${childRoute}`)
    },
    jumpTV (tvLink) {
      window.open(tvLink)
    }
  },
  components:{
    eBottom: bottom
  }
}
</script>

<style lang="less" scoped>
.photos-container{
  height: 100%;
  position: relative;
  .box-card {
    width: 60%;
    margin: 60px auto;
    margin-bottom: 20px;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    color: #85929E;
    font-size: 18px;
    .card-top{
      color: #466C94;
      font-size: 32px;
      span{
        margin-left: 20px;
      }
    }
    .card-middle{
      margin: 30px 0 15px 0;
    }
    .card-bottom{
      width: 70%;
      margin: 0 auto;
    }
  }
  .comment{
    width: 65%;
    margin: 30px auto;
    //display: flex;
    //justify-content: start;
    //flex-wrap: wrap;
    //position: relative;
    -moz-column-count:3; /* Firefox */
    -webkit-column-count:3; /* Safari 和 Chrome */
    column-count:3;
    -moz-column-gap: 10px;
    -webkit-column-gap: 10px;
    column-gap: 10px;
    //-moz-row-gap: 10px;
    //-webkit-row-gap: 10px;
    row-gap: 10px;
    .img-box{
      width: 100%;
      height: 390px;
      background-color: #fff;
      //margin: 10px 1.33333% 15px 0;
      margin: 0 0 10px 0;
      border-radius: 10px;
      cursor: pointer;
      position: relative;
      &:hover{
        transform: scale(1.02);
        transition: 0.5s ease;
      }
      .dateAndBottom{
        position: absolute;
        bottom: 10px;
        width: 100%;
      }
      .img{
        position: relative;
        opacity: 0.9;
      }
      .img-tishi{
        position: absolute;
        bottom: 0px;
        color: #fff;
        font-size: 25px;
        //font-weight: bold;
        width: 100%;
        text-align: center;
        background-color: rgba(0,0,0,0.5);
      }
      img{
        width: 100%;
        height: 230px;
        border-radius: 10px;
      }
      .img-content{
        color: #4A5D70;
        margin: 10px 20px;
        text-align: start;
        font-size: 14px;
      }
      .img-date{
        display: flex;
        justify-content: space-between;
        font-size: 14px;
        text-align: end;
        color: #4A5D70;
        margin: 0 15px;
      }
      .line{
        border: 1px solid #eee;
        margin: 12px 0px;
      }
      .img-bottom{
        display: inline-block;
        padding: 5px 10px;
        color: #FFFFFF;
        font-size: 11px;
        border-radius: 20px;
        margin-left: 10px;
        background-image: linear-gradient(to right, #6853F2 0%, #2FAAB9 100%);
      }
    }
  }
  @media (min-width: 992px) and (max-width: 1300px) {
    .box-card{
      width: 80%;
    }
    .comment {
      column-count: 2;
    }

  }
  @media (min-width: 768px) and (max-width: 991px) {
    .box-card{
      width: 80%;
    }
    .comment {
      width: 90%;
      column-count: 2;
    }

  }
  @media (max-width: 767px) {
    .box-card{
      width: 80%;
    }
    .comment {
      width: 80%;
      column-count: 1;
    }
  }
}
</style>
